<template>
  <transition name="tip">
    <div v-if="canShow" class="tip" :style="style">
      <span class="close" @click="destroyMyself"></span>
      <div class="tip-title" >
        <component :is="iconComponent" class="tip-icon" :fill="color"></component>
        <span>{{title}}</span>
      </div>
      <div class="tip-content" v-if="desc">
        {{desc}}
      </div>
    </div>
  </transition>
</template>

<script>
import IconWarning from '__SVG__/warning.svg' 
import IconInfo from '__SVG__/info-circle.svg' 
export default {
  name: "Tip",
  components: {
    IconWarning,
    IconInfo
  },
  data() {
    return {
      canShow: false,
      iconComponent: 'IconInfo'
    }
  },
  computed: {
    style() {
      const style = { alignSelf: 'center', marginLeft: '0', marginRight: '0' }
      switch(this.align) {
        case 'left' : 
          style.alignSelf = 'flex-start'
          style.marginLeft = '1rem'
          break; 
        case 'right':
          style.alignSelf = 'flex-end'
          style.marginRight = '1rem'
          break; 
        default:
          style.alignSelf =  'center'
          break;
      }
      return style
    },
    color() {
      switch(this.type) {
        case 'success' : 
          this.iconComponent = 'IconInfo'
          return '#009966'
        case 'error':
          this.iconComponent = 'IconWarning'
          return '#ff4545'
        default:
          this.iconComponent = 'IconInfo'
          return '#1296db'
      }
    }
  },
  methods: {  
    destroyMyself() {
      this.canShow = false
    }
  },
  mounted() {
    const { duration } = this
    if(duration) {//如果有配置
      setTimeout(()=>{
        if(this.canShow) this.destroyMyself();
      }, duration)
    }
  }
};
</script>

<style lang="less">
@import url('./tip.less');
</style>



















